<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragments :: head('我的博客')"></head>
<body id="app-container" class="menu-default show-spinner vertical boxed">

    <nav th:replace="_fragments :: nav"></nav>

    <div th:replace="_fragments :: menu(1, 2)"></div>
    <main>
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <h1>我的博客</h1>
                    <div class="mb-2">
                        <a class="btn pt-0 pl-0 d-inline-block d-md-none" data-toggle="collapse" href="#displayOptions"
                           role="button" aria-expanded="true" aria-controls="displayOptions">
                            显示操作
                            <i class="simple-icon-arrow-down align-middle"></i>
                        </a>
                        <div class="collapse dont-collapse-sm" id="displayOptions">
                            <div class="d-block d-md-inline-block">
                                <div class="search-sm d-inline-block float-md-left mr-1 mb-1 align-top">
                                    <input class="form-control" placeholder="Search Table" id="searchDatatable">
                                </div>
                            </div>
                            <div class="float-md-right dropdown-as-select" id="pageCountDatatable">
                                <span class="text-muted text-small">显示 1-10 of 40 个 </span>
                                <button class="btn btn-outline-dark btn-xs dropdown-toggle" type="button"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    10
                                </button>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a class="dropdown-item" href="#">5</a>
                                    <a class="dropdown-item active" href="#">10</a>
                                    <a class="dropdown-item" href="#">20</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="separator"></div>
                </div>
            </div>

            <div class="row">
                <div class="col-12 mb-4 data-table-rows data-tables-hide-filter">
                    <table id="datatableRows" class="data-table responsive nowrap"
                           data-order="[[ 1, &quot;desc&quot; ]]">
                        <thead>
                        <tr>
                            <th>标题</th>
                            <th>创建时间</th>
                            <th>点赞数</th>
                            <th>评论数</th>
                            <th>博客状态</th>
                            <th class="empty">&nbsp;</th>
                        </tr>
                        </thead>
                        <tbody>
                            <tr th:each="blog : ${myBlogList}">
                                <td>
                                    <p class="list-item-heading" th:text="${blog.articleTitle}"></p>
                                </td>
                                <td>
                                    <p class="text-muted" th:text="${#dates.format(blog.articleCreateTime,'yyyy-MM-dd HH:mm:ss')}">711</p>
                                </td>
                                <td>
                                    <p class="text-muted" th:text="${blog.articleLikeCount}"></p>
                                </td>
                                <td>
                                    <p class="text-muted" th:text="${blog.articleCommentCount}"></p>
                                </td>
                                <td>
                                    <p class="text-muted" th:if="${blog.articleState} eq 0"><i class="simple-icon-refresh"></i>未发布</p>
                                    <p class="text-muted" th:if="${blog.articleState} eq 1"><i class="simple-icon-check"></i>已发布</p>
                                </td>
                                <td>
                                    <div class="btn-group mb-1">
                                        <button class="btn btn-outline-primary btn-xs dropdown-toggle" type="button"
                                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            操作
                                        </button>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item text-muted" th:if="${blog.articleState} eq 1" th:href="'/blog/details/' + ${blog.articleId}">查看</a>
                                            <a class="dropdown-item text-muted" th:if="${blog.articleState} eq 0" th:href="'/blog/update/' + ${blog.articleId}">修改</a>
                                            <a class="dropdown-item text-muted" th:if="${blog.articleState} eq 0" th:onclick="'updateState('+ ${blog.articleId}+')'">发布</a>
                                            <a class="dropdown-item text-muted"  data-toggle="modal" data-target="#deleteModal" th:onclick="'deleteThis('+ ${blog.articleId}+')'" href="javascript:;">删除</a>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </main>
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">确认删除？</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <button type="button" class="btn btn-secondary"
                            data-dismiss="modal">取消</button>
                    <button id="confirm" type="button" data-dismiss="modal" class="btn btn-primary">确认删除</button>
                </div>
            </div>
        </div>
    </div>

    <footer th:replace="_fragments :: footer"></footer>

    <th:block th:replace="_fragments :: script" />
    <script th:src="@{/js/my.blog.js}"></script>
</body>
</html>